<form novalidate name="anyTx">

    <div class="flex flex-between body-2 margin-top-4 margin-05">
        <div w-i18n="directives.anyTransaction.textAreaTitle"></div>
        <div ng-if="!!$ctrl.json">
            <span class="link"
                  w-copy="$ctrl.json"
                  w-i18n-ns="app.ui"
                  w-i18n="directives.anyTransaction.copy"></span>
        </div>
    </div>

    <w-input-container>
        <w-input ng-model="$ctrl.json"
                 w-validate
                 w-validator-custom="{{$ctrl.isValidJSON}}"
                 name="script"
                 textarea="true"
                 required
                 class="large"></w-input>

        <w-input-error message="required">
            <span w-i18n="directives.anyTransaction.errors.required"></span>
        </w-input-error>

        <w-input-error message="custom">
            <span w-i18n="directives.anyTransaction.errors.invalidScript"></span>
        </w-input-error>
    </w-input-container>

    <div class="plate-warning margin-top-2">
        <div class="body-2 warning-400 margin-05" w-i18n="directives.anyTransaction.warning.title"></div>
        <div class="footnote-1 basic-500" w-i18n="directives.anyTransaction.warning.body"></div>
    </div>

    <div class="margin-top-2 basic-500 footnote-1">
        <span ng-if="$ctrl.fee" w-i18n="directives.anyTransaction.fee" params="{fee: $ctrl.fee}"></span>
        <span ng-if="!$ctrl.fee || !!$ctrl.anyTx.$invalid" w-i18n="directives.anyTransaction.calculatingFee"></span>
    </div>

    <div class="margin-top-3">
        <w-button class="big long submit"
                  disabled="anyTx.$invalid"
                  on-click="$ctrl.next()">
            <span w-i18n="directives.anyTransaction.ok"></span>
        </w-button>
    </div>
</form>
